/**
 * phi
 */



// ----------------------------------------------------------------
// param
// ----------------------------------------------------------------
var FPS = 30;
var TEXT = "Time is Money.";
var TEXT_MAX_HEIGHT = 250;
var PARTICLE_SPACE  = 15;
var PARTICLE_SIZE   = 5;


// ----------------------------------------------------------------
// global
// ----------------------------------------------------------------
var global = {
    canvas: null,
    keyboard: [],
    
    root: null,
    bullet: null,
    particles: []
};



var Circle = null;

TM.loadScript("dom", "dom");
TM.loadScript("dom", "canvas");
TM.loadScript("app");

// 
TM.addNamespace("dat-gui", "../../plugins/dat-gui");
TM.loadDatGUI();

var defineCircle = function(){
    
    var texture = (function()
    {
        var texture = new TM.App.Texture();
        texture.canvas.width = 360*15;
        texture.frameWidth = 10;
        texture.frameHeight= 10;
        
        // texture.context.shadowBlur = 5;
        // texture.context.shadowColor = "#fff";
        
        for (var i=0; i<360; ++i) {
            texture.context.fillStyle = "hsl(" + (360/360)*i + ", 60%, 50%)";
            texture.context.fillRect(i*10+2.5, 0, 10, 10);
        }
        
        // texture.save();
        
        
        return texture;
    })();
    
    Circle = TM.createClass({
        
        superClass: TM.App.GameElement,
        
        init: function(x, y, color) {
            TM.App.GameElement.prototype.init.apply(this);
            
            this.x = x || 100;
            this.y = y || 100;
            this.targetX = this.x;
            this.targetY = this.y;
            this.colorAngle  = color || 0;
            this.radius   = 5;
            this.isNearMouse = false;
            this.frame = 0;
            this.width = 10;
            this.height = 10;
            
            this.explode();
        },
        
        update: function() {
            
            var app = TM.global.app;
            
            this.x += (this.targetX-this.x)*0.25;
            this.y += (this.targetY-this.y)*0.25;
            
            if (this.isHitElement({
                x:app.mouse.x,
                y:app.mouse.y,
                radius: 100
            }))
            {
            
                this.isNearMouse = true;
                this.scaleX = 2;
                this.scaleY = 2;
                
                if (app.mouse.button & TM.DOM.Mouse.BUTTON_LEFT) {
                    this.rotate+=20;
                    // this.x += (Math.random()*2-1)*5;
                    // this.y += (Math.random()*2-1)*5;
                }
            }
            else {
                this.rotate = 45;
                this.isNearMouse = false;
                this.rotate = 45;
                this.scaleX = 1;
                this.scaleY = 1;
            }
            
        },
        
        draw: function(graphics) {
            graphics.globalCompositeOperation = "lighter";
            graphics.fillStyle = (this.isNearMouse) ? this.color : "white";
            
            graphics.drawImage(texture.canvas,
                this.colorAngle*texture.frameWidth, 0, texture.frameWidth, texture.frameHeight,
                -this.width/2, -this.height/2, texture.frameWidth, texture.frameHeight);
        },
        
        explode: function() {
            var radian = Math.random()*360*Math.PI/180;
            this.x = window.innerWidth/2 + Math.cos(radian)*Math.random()*2000;
            this.y = window.innerHeight/2 + Math.sin(radian)*Math.random()*2000;
        }
    });
    
    /*
    Circle = TM.createClass({
        
        superClass: TM.App.Sprite,
        
        init: function(x, y, color){
            TM.App.Sprite.prototype.init.call(this);
            
            this.x = x || 0;
            this.y = y || 0;
            this.radius = 5;
            
            this.image.context.fillStyle = "red";
            this.image.context.fillRect(0, 0, 5, 5);
        },
    });
    */
};


var app = null;

/**
 * main
 */
TM.main(function()
{
    // 円クラスを定義
    defineCircle();
    
    init();
    run();
    
    if (window.GUI) {
        var gui = new GUI();
        
        
        gui.add(window, "TEXT").onChange(reload);
        gui.add(window, "TEXT_MAX_HEIGHT", 100, 500).onChange(reload);
        
        gui.add(window, "PARTICLE_SPACE", 5, 20, 1).onChange(reload);
        gui.add(window, "PARTICLE_SIZE", 5, 20, 1).onChange(reload);
        
        gui.add(window, "explode");
        
        gui.add(window, "pattern00");
        gui.add(window, "pattern01");
        gui.add(window, "pattern02");
        gui.add(window, "pattern03");
    }
    
    window.onresize = reload;
    
});

var init = function()
{
    app = TM.global.app = TM.App.CanvasApp();
    app.scene.background = "rgba(0, 0, 0, 0.25)";

    setupParticle();
};

var reload = function()
{
    app.scene.removeChildren();
    setupParticle();
};

var run = function()
{
    var app = TM.global.app;
    app.run();
};

var explode = function()
{
    global.particles.execChildren(Circle.prototype.explode);
};


var setupParticle = function()
{
    var app = TM.global.app;
    
    // テクスチャレンダリング用キャンバスを生成
    var tempCanvas = tm.DOM.Canvas(tm.$create("canvas"));
    var tempContext= tempCanvas.context;
    tempCanvas.width  = app.canvas.width;
    tempCanvas.height = TEXT_MAX_HEIGHT;
    // テキストを描画
    tempContext.font = TEXT_MAX_HEIGHT + "px 'Jockey One'";
    tempContext.textAlign    = "center"
    tempContext.textBaseline = "middle";
    tempContext.fillText(
        TEXT,
        tempCanvas.width/2,
        TEXT_MAX_HEIGHT/2
    );
    
    // パーティクルをセットアップ
    global.particles = app.scene.addChild(TM.App.GameElement());
    
    var heightOffset = 100;
    var heightOffset = app.canvas.height/2 - TEXT_MAX_HEIGHT/2;
    
    var imageData = tempCanvas.imageData;
    imageData.setup(0, 0, tempCanvas.width, tempCanvas.height);
    
    
    for (var height=0; height<tempCanvas.height; height+=PARTICLE_SPACE) {
        
        for (var width=0; width<tempCanvas.width; width+=PARTICLE_SPACE) {
            var index = height*tempCanvas.width + width;
            var p = imageData.getPixel(index);
            
            if (p[3] == 255) {
                global.particles.addChild( Circle(
                    width, height+heightOffset,
                    Math.floor(width/tempCanvas.width*360)
                ));
            }
        }
    }
};

var pattern00 = function(){
    
};
var pattern01 = function(){
    
};
var pattern02 = function(){
    
};
var pattern03 = function(){
    
};

































